<template>
	<view class="homeCon">
		<u-navbar :is-back="false" title="节鱼" :background="{ background: '#a0cfff' }" title-color="#FFFFFF"></u-navbar>
		<view class="homeSelect">
			<view class="homeT flex-sbc u-m-15">
				<view class="left">
					<u-input v-model="value"/>
				</view>
				<view class="right">
					<u-button type="warning" shape="circle" size="mini" @click="selectClick">搜索</u-button>
				</view>
			</view>
		</view>
		<view class="u-m-15">
			<u-swiper :list="list" :title="true" @click="click"></u-swiper>
		</view>
		<view class="tipC u-m-15">
			<view class="tipS u-p-t-20" @click="tabClick(0)">
				<view class="tipTu">
					<view style="display: flex;justify-content: center;">
						<image src="../../static/image/quanC.png" style="height: 90rpx;width: 80rpx;"></image>
					</view>
					<view class="tipTitle u-m-t-10">全部</view>
				</view>
			</view>
			<view class="tipS u-p-t-20" v-for="(item,index) in tabList" :key="index" v-if="index < tabNum" @click="tabClick(item.id)">
				<view class="tipTu">
					<view style="display: flex;justify-content: center;">
						<image :src="item.imageUrl" style="height: 90rpx;width: 80rpx;"></image>
					</view>
					<view class="tipTitle u-m-t-10">{{item.title}}</view>
				</view>
			</view>
			<view class="tipS u-p-t-20" @click="tabNumClick(tanTpe)">
				<view class="tipTu">
					<view style="display: flex;justify-content: center;">
						<image src="../../static/image/quanb.png" style="height: 90rpx;width: 80rpx;"></image>
					</view>
					<view class="tipTitle u-m-t-10">分类</view>
				</view>
			</view>
		</view>
		<view class="u-m-l-15 u-m-r-15">
			<shop :flowList="shopList"></shop>
		</view>
		
	</view>
</template>

<script>
	import shop from '../../components/shop.vue'
	import helper from '../../common/helper.js'
	export default {
		components: {
			shop
		},
		data() {
			return {
				value: '',
				tabNum: 8,
				tanTpe: 0,
				list: [],
				tabList: [],
				tabId: 0,
				shopList: []
			}
		},
		created() {
			this.getTab()
			this.getShop()
		},
		methods: {
			//通过轮播图到商品
			click(index){
				uni.navigateTo({
					url: '../shopes/shopXQ?id=' + this.list[index].shopId
				})
			},
			//搜索
			selectClick(){
				uni.navigateTo({
					url: '../shopes/shopes?title=' + this.value
				})
			},
			//获取导航栏
			getTab(){
				let that = this
				that.postRequest(helper.tabListUrl).then(res => {
					if(res.data.flag == "200"){
						let serve = res.data
						that.tabList = serve.tab
					}
				})
			},
			//获取导航栏总数
			tabNumClick(index){
				let that = this
				if(index == 0){
					that.tabNum = that.tabList.length
					that.tanTpe = 1
				}
				if(index == 1){
					that.tabNum = 8
					that.tanTpe = 0
				}
			},
			//导航栏数
			tabClick(index){
				let that = this
				that.tabId = index
			},
			//获取商品
			getShop(){
				let that = this
				let data = {
					shopType: that.tabId
				}
				that.getRequest(helper.getShop,data).then(res => {
					if(res.data.flag == "200"){
						let serve = res.data
						that.shopList = []
						var bi = 0
						serve.shopList.forEach((item,index) => {
							if(item.shopUrl.indexOf("<<tupian>>") > 0){
								item.shopUrl = item.shopUrl.split("<<tupian>>")[0]
								// console.log(index)
							}
							// console.log(item.shopUrl)
							that.shopList.push(item)
							if(bi < 6 && item.shopState == true){
								let obj = {
									shopId: item.id,
									image: item.shopUrl,
									title: item.title
								}
								that.list.push(obj)
								bi++
							}
						})
					}
				})
			},
			
		},
		watch:{
			tabId:function(){
				this.getShop()
			}
		}
	}
</script>
<style>
		page {
			background-color: rgb(240, 240, 240);
		}
</style>
<style lang="scss" scoped>
.homeCon{
	.homeSelect{
		.homeT{
			width: calc(100%-30rpx);
			height: 70rpx;
			border-radius: 50rpx;
			border: 2rpx solid #FF6101;
			background-color: #FFFFFF;
			
			.left{
				width: 83%;
				padding-left: 25rpx;
			}
			.right{
				width: 13%;
			}
		}
	}
	.tipC{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;
		width: calc(100-30rpx);
		.tipS{
			width: 20%;
			height: 170rpx;
			
			.tipTu{
				display: flex;
				flex-direction: column;
				.tipTitle{
					
					font-size: 26rpx;
					text-align: center;
				}
			}
			
		}
	}
}
</style>
